<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        form>div {
            margin-top: 10px;
        }

        .createCode {
            user-select: none;
        }

        .right {
            font-size: 12px;
            color: green;
        }

        .error {
            font-size: 12px;
            color: red;
        }
    </style>
</head>

<body>
    <form class="form" onsubmit="return false">
        <div class="input-group">
            <lable>用户名:</lable>
            <input type="text" class="user">
            <span class="user_tips"></span>
        </div>
        <div class="input-group">
            <lable>密&emsp;码:</lable>
            <input type="text" class="pwd">
            <span class="pwd_tips"></span>
        </div>
        <div class="input-group">
            <input type="submit" class="btn" value="登录">
        </div>
    </form>
</body>

<script type="module">
    // 用户名
    // 由数字 字母 _ 组成, 6-12位, 切不能以数字开头

    // 安装从易到难的顺序:
    // a. 6-12位
    // b. 切不能以数字开头
    // c. 由数字 字母 _ 组成 => 所有的字符都要在(数字 字母 _ )范围内 => 不在此范围内就是非法字符

    import { randCode } from "../js/tool.js";

    // 1. 获取元素
    // 通过class名获取元素,并取出数组中的第一个
    var userInp = document.getElementsByClassName("user")[0];
    var userTips = document.getElementsByClassName("user_tips")[0];

    var pwdInp = document.getElementsByClassName("pwd")[0];
    var pwdTips = document.getElementsByClassName("pwd_tips")[0];

    var btn = document.getElementsByClassName("btn")[0];
    console.log(userInp, userTips, btn);

    btn.onclick = function () {
        // 用户输入的用户名和密码
        var user = userInp.value;
        var pwd = pwdInp.value;

        if (user && pwd) {
            // 接口验证
            // 用户输入的用户名和密码(前端) -> 后端接口(接收数据) -> 对应用户名在数据库中查找用户名是否存在?
            // a. 存在 -> 取出对应密码和前端传入的对比   (1) 成功 -> 登录成功  (2)  失败 -> 用户名或密码有误
            // b. 不存在 -> 该用户未注册


            var xhr = new XMLHttpRequest();

            // 以post方式传递数据时,将数据存在请求主体(body)中,随着http header传递给后端 

            // post传参 
            // 1. 数据存放在请求主体中  -> 作为参数放到xhr.send()中
            // 2. 发送请求之前需要先设置请求头 
            // xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

            xhr.open("post", `http://43.138.81.225/demo/php/login.php`, true)

            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xhr.send(`user=${user}&pwd=${pwd}`);

            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var result = xhr.responseText;
                    console.log(result);
                    result = JSON.parse(result);
                    console.log(result);
                    var { status, message } = result;
                    if (status) {
                        location.href = "./07 ajax和商品的搜索 排序 分页_封装.html";
                    } else {
                        alert(message);
                    }
                }
            }
        }

    }

</script>

</html>